<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生成绩详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        .score-container {
            padding: 20px;
        }
        .score-card {
            background: #fff;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
            margin-bottom: 15px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .score-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .score-item:last-child {
            border-bottom: none;
        }
        .score-label {
            font-weight: bold;
            color: #333;
            min-width: 120px;
        }
        .score-value {
            color: #1E9FFF;
            font-weight: bold;
        }
        .score-value.high {
            color: #009688;
        }
        .score-value.low {
            color: #FF5722;
        }
        .score-value.medium {
            color: #FFB800;
        }
        .no-data {
            text-align: center;
            padding: 50px;
            color: #999;
            font-size: 16px;
        }
        .score-header {
            background: #009688;
            color: white;
            padding: 15px;
            border-radius: 4px 4px 0 0;
            margin: -20px -20px 20px -20px;
        }
    </style>
</head>
<body>
<div class="score-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3>学生成绩详情</h3>
                </div>
                <div class="layui-card-body">
                    <div id="scoreContent">
                        <div class="no-data">正在加载成绩数据...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../../lib/layui-v2.6.3/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    layui.use(['layer'], function(){
        var layer = layui.layer;
        var $ = layui.$;

        // 获取URL参数
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 获取学生ID
        const studentId = getQueryParam('studentId');
        if (!studentId) {
            layer.msg('缺少学生ID参数！');
            return;
        }

        // 加载学生成绩数据
        function loadStudentScores() {
            axios.get('/score/' + studentId).then(function(res) {
                if (res.data.code === 200) {
                    const scores = res.data.data;
                    displayScores(scores);
                } else {
                    layer.msg('加载失败：' + res.data.message);
                    $('#scoreContent').html('<div class="no-data">暂无成绩数据</div>');
                }
            }).catch(function(error) {
                console.error('请求失败:', error);
                layer.msg('网络请求失败，请检查网络连接');
                $('#scoreContent').html('<div class="no-data">加载失败，请重试</div>');
            });
        }

        // 显示成绩数据
        function displayScores(scores) {
            if (!scores || scores.length === 0) {
                $('#scoreContent').html('<div class="no-data">暂无成绩数据</div>');
                return;
            }

            let html = '';

            scores.forEach(function(score, index) {
                // 确定分数显示的颜色
                let scoreClass = '';
                let currentScore = score.score || score.etScore || score.ptScore || 0;

                if (currentScore >= 80) {
                    scoreClass = 'high';
                } else if (currentScore >= 60) {
                    scoreClass = 'medium';
                } else if (currentScore > 0) {
                    scoreClass = 'low';
                }

                html += `
                <div class="score-card">
                    <div class="score-header">
                        <h4>${score.subject || '未知科目'}</h4>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md4">
                            <div class="score-item">
                                <span class="score-label">最终得分：</span>
                                <span class="score-value ${scoreClass}">${score.score || '未评分'}</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="score-item">
                                <span class="score-label">笔试得分：</span>
                                <span class="score-value ${score.etScore ? (score.etScore >= 60 ? 'high' : 'low') : ''}">${score.etScore || '未考试'}</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="score-item">
                                <span class="score-label">实践得分：</span>
                                <span class="score-value ${score.ptScore ? (score.ptScore >= 60 ? 'high' : 'low') : ''}">${score.ptScore || '未考试'}</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            });

            $('#scoreContent').html(html);
        }

        // 页面加载完成后获取数据
        $(document).ready(function() {
            loadStudentScores();
        });
    });
</script>
</body>
</html>